
import { SetStateAction, useEffect,useState } from 'react'
// import {useNavigate} from 'react-router-dom'
import {getknow,get_archives_list} from '../../api/knowledge'
import style from './css/knowledge.module.scss'
import { ForkOutlined,EyeOutlined } from '@ant-design/icons/lib/icons'
interface Item {
  status: string;
  cover?: string
  title: string
  summary: string
  id: string
  views:number
}
function Knowledge() {
  const [con,setCon]=useState([[]])
  const [conlist,setChives]=useState([])
 useEffect(()=>{
  getknow().then((res: any)=>{
   
       setCon(res.data.data)
    
   
  })
  get_archives_list().then((res)=>{
    console.log(res.data.data);
    
     setChives(res.data.data)
  })
 },[])
 const toDetail=(item:Item)=>{
   console.log(item)
  //  navigate(`/knowledge/${item.id}`)
   window.location.href=`/index/knowledge_detail/${item.id}`
  
 }
  return (
    <div className={style.mainoverall}>
       <div className={style.leftoverall}>
          {
              con[0]&&con[0].map((item:Item,index:number)=>{
               return <div key={index} className={style.mainlist} onClick={()=>toDetail(item)}>
         <div className={style.leftmain}>
           <ul className={style.ulst}>
          <li className={style.litt1}><h4 >{item.title}</h4><span className={style.spanst}>12个月前</span>  </li>
           <li><p>{item.summary}</p></li>
          <li className={style.litt}><span>{item.views}<EyeOutlined /> </span> <span><ForkOutlined /> 分享</span> </li>
         
        </ul>
         </div>
        <div className={style.rightimg}><img src={item.cover} alt="" className={style.imgst} /></div>
               </div>
              })
         }
       </div>
       <div className={style.rigthoverall}>
        <div className={style.rightmainst}>
         <p>推荐阅读</p>
        </div>
        <div className={style.rightmainxia}>
        <p>文章分类</p>
        </div>
       </div>
    </div>
  )
}

export default Knowledge

